<% include header.ejs %>
<link rel="stylesheet" href="/css/croppic.css">
<style type="text/css">
  #cropContainerHeader {
      width: 200px;
      height: 200px;
      position:relative; /* or fixed or absolute */
  }
  #upload-avatar {
    width: 200px;
    height: 200px;
    position:relative; /* or fixed or absolute */
  }
</style>
<div class="container">
  <div class="row login">
    <div class="col-md-5 col-sm-5">
      <div class="login-icon animated flipInY">
        <img src="img/logo-b.png" alt="bingblue">
        <h4>Welcome to <small>Bingblue</small></h4>
      </div>
    </div>
    <div class="col-md-5 col-sm-6">
      <form class="" action="/api/upload" method="post" enctype='multipart/form-data'>
        <!-- <input type="file" name='upload-avatar'/> -->
        <div id="upload-avatar"></div>
        <input type="submit" value="提交">
      </form>
    </div>
  </div>
</div>
<% include footer.ejs %>
<script src="/js/croppic.js"></script>
<script type="text/javascript">
  // $(function(){
  //   var cropperOptions = {
  //     uploadUrl:'/api/upload'
  //   } 
  //   var cropperHeader = new Croppic('upload-avata');
  // });
// var croppicHeaderOptions = {
//       uploadUrl: "/api/upload",
//       cropData: {
//         "DummyData": 1,
//         "DummyData2":"asdas"
//       },
//       cropUrl:"/api/upload",
//       customUploadButtonId: "cropContainerHeaderButton",
//       model: false,
//       loaderHtml: '<div><span></span><span></span><span></span></div> '
// }
// var croppic = new Croppic("upload-avata", croppicHeaderOptions);
// var cropperHeader = new Croppic('upload-avatar');

// var cropContainerModalOptions = {
//     uploadUrl: "/api/upload",
//     cropUrl: "/api/upload",
//     model: true,
//     imgEyecandyOpacity: 0.4,
//     loaderHtml: '<div><span></span><span></span><span></span></div> '
// }
// var cropContainerModal = new Croppic("cropContainerModal", cropContainerModalOptions)
var croppicHeaderOptions = {
  //uploadUrl:'img_save_to_file.php',
  cropData:{
    "dummyData":1,
    "dummyData2":"asdas"
  },
  cropUrl:'/api/upload',
  customUploadButtonId:'cropContainerHeaderButton',
  modal:false,
  processInline:true,
  loaderHtml:'<div class="loader bubblingG"><span id="bubblingG_1"></span><span id="bubblingG_2"></span><span id="bubblingG_3"></span></div> ',
  onBeforeImgUpload: function(){ console.log('onBeforeImgUpload') },
  onAfterImgUpload: function(){ console.log('onAfterImgUpload') },
  onImgDrag: function(){ console.log('onImgDrag') },
  onImgZoom: function(){ console.log('onImgZoom') },
  onBeforeImgCrop: function(){ console.log('onBeforeImgCrop') },
  onAfterImgCrop:function(){ console.log('onAfterImgCrop') },
  onError:function(errormessage){ console.log('onError:'+errormessage) }
} 
var croppic = new Croppic('upload-avatar', croppicHeaderOptions);
</script>